<template>
	<div class="receipt">
		<div class="receipt-nav">
			<span>收单记录</span>
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>首页</el-breadcrumb-item>
				<el-breadcrumb-item>交易管理</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/home/transaction/receipt' }">收单记录</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<hr>
		<div class="receipt-tab">
			<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
				<el-tab-pane label="收单记录查询" name="first">
					<div class="receipt-select">
						<el-form label-width="90px" :model="search" :inline="true" ref="searchForm">
							<ul class="receipt-select-date">
								<li>起止日期：</li>
								<li>
									<span class="date-day" @click="dateDay(0)">今天</span>
									<span class="date-day" @click="dateDay(1)">最近3天</span>
									<span class="date-day" @click="dateDay(2)">最近7天</span>
								</li>
								&emsp;
								<li>
									<el-form-item prop="date">
										<el-date-picker v-model="search.date" type="date" prop="" placeholder="选择日期"
											style="width: 150px;">
										</el-date-picker>
									</el-form-item>
									&emsp;~
								</li>
								<li>
									<el-form-item prop="date1">
										<el-date-picker v-model="search.date1" type="date" placeholder="选择日期"
											style="width: 150px;">
										</el-date-picker>
									</el-form-item>
								</li>
							</ul>
							<ul class="receipt-select-date">
								<li>商户订单号：</li>
								<li>
									<el-form-item prop="order" style="width: 180px;">
										<el-input v-model="search.order" style="width: 180px;"></el-input>
									</el-form-item>
								</li>
								<span>客户姓名：</span>
								<li>
									<el-form-item prop="name" style="width: 180px;">
										<el-input v-model="search.name" style="width: 180px;"></el-input>
									</el-form-item>
								</li>
								<span>客户账号：</span>
								<li>
									<el-form-item prop="num" style="width: 180px;">
										<el-input v-model="search.num" style="width: 180px;"></el-input>
									</el-form-item>
								</li>
							</ul>
							<ul class="receipt-select-date">
								<li>交易类型：</li>
								<li>
									<el-form-item prop="trans" style="width: 180px;">
										<el-select v-model="search.trans" filterable clearable style="width: 180px;">
											<el-option v-for="item in trans" :key="item.value" :label="item.label"
												:value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</li>
								<span>交易状态：</span>
								<li>
									<el-form-item prop="transState" style="width: 180px;">
										<el-select v-model="search.transState" filterable clearable>
											<el-option v-for="item in transState" :key="item.value" :label="item.label"
												:value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</li>
								<span>业务场景：</span>
								<li>
									<el-form-item prop="business" style="width: 180px;">
										<el-select v-model="search.business" filterable clearable>
											<el-option v-for="item in business" :key="item.value" :label="item.label"
												:value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</li>
							</ul>
							<ul class="receipt-select-date">
								<li>资金状态：</li>
								<li>
									<el-form-item style="width: 180px;" prop="moneyState">
										<el-select v-model="search.moneyState" filterable clearable>
											<el-option v-for="item in moneyState" :key="item.value" :label="item.label"
												:value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</li>
								<span>备注：</span>
								<li>
									<el-input v-model="search.remark" prop="remark"></el-input>
								</li>
							</ul>
							<el-button style="background-color: #0064c1;color: #FFFFFF;margin-left: 80px;">搜&ensp;索
							</el-button>
							<el-button @click="resetForm('searchForm')"
								style="background-color: #ff0000;color: #FFFFFF;margin-left: 30px;">重&ensp;置</el-button>
						</el-form>
						<div class="dotted"></div>
						<p style="margin: 20px 0;">
							<span>共1000笔交易记录</span>
							<button class="toAdd" @click="toAdd()">添加</button>
						</p>
						<div class="select-bottom">
							<table border="1" rules="all">
								<tr>
									<th>支付时间</th>
									<th>商户订单号</th>
									<th>客户姓名</th>
									<th>客户壹钱包账号</th>
									<th>交易类型</th>
									<th>业务场景</th>
									<th>金额(元)</th>
									<th>手续费(元)</th>
									<th>交易状态</th>
									<th>资金状态</th>
									<th>备注</th>
									<th>操作</th>
								</tr>
								<tr v-for="(item,index) in ftableData.slice((currentPage-1)*pageNum,currentPage*pageNum)" :key="item.id">
									<td>{{item.date}}</td>
									<td>{{item.order}}</td>
									<td>{{item.name}}</td>
									<td>{{item.num}}</td>
									<td>{{item.trans}}</td>
									<td>{{item.business}}</td>
									<td>{{item.money}}</td>
									<td>{{item.serve}}</td>
									<td>{{item.transState}}</td>
									<td>{{item.moneyState}}</td>
									<td>{{item.remark}}</td>
									<td>
										<el-button class="edit" @click="editRow(index)">编辑</el-button>
										<el-button class="del" @click="delRow(index)">删除</el-button>
									</td>
								</tr>
							</table>
							<el-pagination @current-change="handleCurrentChange"
								:current-page.sync="currentPage" :page-size="pageNum" layout="total, prev, pager, next"
								:total="tableData.length">
							</el-pagination>
							<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%" class="dialog">
								<el-form label-width="90px" :model="tempRow">
									<el-form-item label="支付时间">
										<el-date-picker style="width: 100%;" v-model="tempRow.date" type="date"
											value-format="yyyy-MM-dd" placeholder="选择日期">
										</el-date-picker>
									</el-form-item>
									<el-form-item label="商户订单号">
										<el-input v-model="tempRow.order"></el-input>
									</el-form-item>
									<el-form-item label="客户姓名">
										<el-input v-model="tempRow.name"></el-input>
									</el-form-item>
									<el-form-item label="壹钱包账号">
										<el-input v-model="tempRow.num"></el-input>
									</el-form-item>
									<el-form-item label="交易类型">
										<el-input v-model="tempRow.trans"></el-input>
									</el-form-item>
									<el-form-item label="业务场景">
										<el-input v-model="tempRow.business"></el-input>
									</el-form-item>
									<el-form-item label="金额(元)">
										<el-input v-model="tempRow.money"></el-input>
									</el-form-item>
									<el-form-item label="手续费(元)">
										<el-input v-model="tempRow.serve"></el-input>
									</el-form-item>
									<el-form-item label="交易状态">
										<el-input v-model="tempRow.transState"></el-input>
									</el-form-item>
									<el-form-item label="资金状态">
										<el-input v-model="tempRow.moneyState"></el-input>
									</el-form-item>
									<el-form-item label="备注">
										<el-input v-model="tempRow.remark"></el-input>
									</el-form-item>
								</el-form>
								<span slot="footer" class="dialog-footer">
									<el-button @click="dialogVisible = false">取 消</el-button>
									<el-button type="primary" @click="sureEdit()">确 定</el-button>
								</span>
							</el-dialog>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="收单记录下载" name="second">收单记录下载</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	import {getTableData} from "@/api/user/user.js"
	export default {
		computed: {
			// 搜索过滤
			ftableData() {
				return this.tableData.filter(item => {
					var flag = true;
					// 对搜索search对象进行遍历
					// console.log(this.search);
					for (var k in this.search) {
						// 如果搜索条件不为空才进行搜索
						if (this.search[k] != '') {
							// console.log(this.search[k]);
							// 如果当前遍历item对应的k不包含当前搜索对应的k
							if (!item[k].includes(this.search[k])) {
								// flag值改变false（当前数据就会被过滤掉）
								flag = false;
							}
						}
					}
					return flag;
				})
			}
		},
		data() {
			return {
				// 数据导航页 默认为第一页
				currentPage: 1,
				// 每页显示的条数
				pageNum:10,
				// 搜索选项
				trans: [{
					value: '线上交易1',
					label: '线上交易'
				}, {
					value: '线上退款',
					label: '线上退款'
				}, {
					value: '线下交易',
					label: '线下交易'
				}],
				business: [{
					value: '普通线上收单',
					label: '普通线上收单'
				}, {
					value: '线下收单',
					label: '线下收单'
				}, {
					value: '邮寄收单',
					label: '邮寄收单'
				}],
				transState: [{
					value: '成功',
					label: '成功'
				}, {
					value: '失败',
					label: '失败'
				}],
				moneyState: [{
					value: '在途',
					label: '在途'
				}, {
					value: '到账',
					label: '到账'
				}, {
					value: '欠款',
					label: '欠款'
				}],
				// 搜索内容
				search: {
					date: '',
					date1: '',
					order: '',
					name: '',
					num: '',
					trans: "",
					transState: '',
					business: '',
					moneyState: '',
					remark: '',
				},
				// dialog标题
				dialogTitle: "编辑",
				// tab
				activeName: 'first',
				// 日期
				value1: '',
				value2: '',
				// 表格数据
				tableData: [],
				// 编辑行的下标
				editIndex: null,
				// 默认编辑dialog不显示
				// tempRow 编辑临时行
				tempRow: {
					date: '',
					date1: '',
					order: '',
					name: '',
					num: '',
					trans: "",
					business: "",
					money: null,
					serve: null,
					transState: '',
					moneyState: '',
					remark: '',
				},
				dialogVisible: false,
			};
		},
		created() {
			// 调用获得表格数据的方法
			this.getTabledata();
		},
		methods: {
			// 数据页码跳转
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.currentPage=`${val}`*1;
			},
			// 重置搜索表单
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			// tab切换
			handleClick(tab, event) {
				console.log(tab, event);
			},
			// 起止日期点击
			dateDay(ind) {
				var dateDay = document.querySelectorAll(".date-day");
				dateDay.forEach((item) => {
					item.classList.remove("active");
					dateDay[ind].classList.add('active');
				})
			},
			// 获取表格数据
			getTabledata() {
				getTableData("/list/tabledata")
					.then(res => {
						this.tableData = res.data.list;
						// console.log(this.tableData);
					})
			},
			// 删除行
			delRow(ind) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.tableData.splice(ind, 1);
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			// 实现编辑
			sureEdit() {
				if (this.dialogTitle == "添加") {
					// 数据添加到最前面
					this.tableData.unshift({
						...this.tempRow
					});
					// 弹出成功提示
					this.$message({
						type: 'success',
						message: '添加成功!'
					});
					this.dialogVisible = false;
				} else {
					// 可以用js对象解构实现
					// this.tableData[this.editIndex].$set(...this.tempRow);
					this.tableData[this.editIndex].date = this.tempRow.date;
					this.tableData[this.editIndex].order = this.tempRow.order;
					this.tableData[this.editIndex].name = this.tempRow.name;
					this.tableData[this.editIndex].num = this.tempRow.num;
					this.tableData[this.editIndex].trans = this.tempRow.trans;
					this.tableData[this.editIndex].business = this.tempRow.business;
					this.tableData[this.editIndex].money = this.tempRow.money;
					this.tableData[this.editIndex].serve = this.tempRow.serve;
					this.tableData[this.editIndex].transState = this.tempRow.transState;
					this.tableData[this.editIndex].moneyState = this.tempRow.moneyState;
					this.tableData[this.editIndex].remark = this.tempRow.remark;
					this.dialogVisible = false;
					// this.$set()
				}
			},
			// 编辑行
			editRow(index) {
				// 点击的时候弹窗显示
				this.dialogVisible = true;
				this.dialogTitle = "编辑";
				// this.tempRow.$set(...this.tableData[index]);
				this.tempRow.date = this.tableData[index].date;
				this.tempRow.order = this.tableData[index].order;
				this.tempRow.name = this.tableData[index].name;
				this.tempRow.num = this.tableData[index].num;
				this.tempRow.trans = this.tableData[index].trans;
				this.tempRow.business = this.tableData[index].business;
				this.tempRow.money = this.tableData[index].money;
				this.tempRow.serve = this.tableData[index].serve;
				this.tempRow.transState = this.tableData[index].transState;
				this.tempRow.moneyState = this.tableData[index].moneyState;
				this.tempRow.remark = this.tableData[index].remark;
				this.editIndex = index;
			},
			// 添加
			toAdd() {
				// 修改标题
				this.dialogTitle = "添加";
				// 清空临时数据
				this.tempRow = {
					date: '',
					order: '',
					name: '',
					num: null,
					trans: "",
					business: "",
					money: null,
					serve: null,
					transState: '',
					moneyState: '',
					remark: '',
				};
				// 显示弹窗
				this.dialogVisible = true;
			},
		}
	};
</script>

<style scoped="scoped">
	.receipt {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		min-width: 1000px;
		/* overflow:auto; */
	}

	.receipt .receipt-nav {
		width: 97%;
		height: 20px;
		line-height: 20px;
		margin: 25px auto;
	}

	.receipt-nav>span {
		display: block;
		width: 200px;
		height: 100%;
		float: left;
		font-size: 17px;
		color: #333;
		padding-left: 8px;
		border-left: 1px solid #0075d2;
	}

	.receipt-nav .el-breadcrumb {
		float: right;
	}

	.receipt hr {
		margin: 0 auto 25px;
		width: 96%;
		border: none;
		border-bottom: 1px solid #ddd;
		height: 0;
	}

	.receipt .receipt-tab {
		width: 96%;
		height: 270px;
		margin: 0 auto;
	}

	.receipt .receipt-select-date {
		width: 96%;
		height: 60px;
		margin: 0 auto;
		min-width: 1000px;
		font-size: 13px;
		color: #333;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.receipt-select-date>li {
		height: 50px;
		float: left;
	}

	.receipt-select-date>span {
		display: block;
		width: 100px;
		height: 50px;
		float: left;
		line-height: 50px;
		text-align: center;
	}

	.receipt-select-date>li:nth-of-type(1) {
		width: 80px;
		line-height: 50px;
		text-align: right;
	}

	.receipt-select-date>li:nth-of-type(2) {
		width: 180px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.receipt-select-date>li:nth-of-type(3) {
		width: 180px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.receipt-select-date>li:nth-of-type(4) {
		width: 180px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.receipt-select-date>li>.date-day {
		display: block;
		text-align: center;
		line-height: 30px;
		width: 70px;
		height: 30px;
		margin: 0 5px;
	}

	.active {
		border: 1px solid #0075D2;
		color: #0075D2;
	}

	.receipt-select .dotted {
		height: 0px;
		border-bottom: 1px dotted #ccc;
		margin-top: 30px;
	}

	.receipt .select-bottom {
		width: 100%;
		height: 700px;
		/* border: 1px solid #0064C1; */
		/* overflow: auto; */
	}

	.select-bottom table {
		width: 100%;
		height: 400px;
		border: 1px solid #CCCCCC;
		font-size: 12px;
		color: #333;
	}

	.select-bottom table th {
		background-color: #f5f6fa;
		height: 41px;
		font-weight: 400;
	}

	.select-bottom table td {
		height: 45px;
		text-align: center;
		line-height: 45px;
	}

	.receipt .toAdd {
		display: inline-block;
		float: right;
		width: 50px;
		height: 30px;
		background-color: #67c23a;
		border: none;
		border-radius: 5px;
		color: #FFFFFF;
	}
</style>
<style>
	.receipt .el-tabs__item.is-active {
		color: #333 !important;
		font-size: 14px;
		border-top: 2px solid #0075D2;
		height: 42px !important;
	}

	.receipt .el-tabs__item {
		color: #999 !important;
	}

	.receipt .el-tabs__item:hover {
		color: #333 !important;
		font-size: 14px;
	}

	.receipt .el-input__inner {
		border: 1px solid #85878b !important;
		border-radius: 0 !important;
	}

	.receipt .el-input__inner::-webkit-input-placeholder {
		color: #85878b;
	}

	.receipt .select-bottom .edit {
		width: 50px !important;
		height: 30px;
		background-color: #0075D2;
		color: #FFFFFF;
		text-align: center;
		padding: 0;
	}

	.receipt .select-bottom .del {
		width: 50px !important;
		height: 30px;
		background-color: #de0000;
		color: #FFFFFF;
		text-align: center;
		padding: 0;
	}

	.receipt .receipt-select-date .el-form-item.el-form-item__content {
		vertical-align: middle !important;
	}

	.receipt .el-form--inline .el-form-item {
		vertical-align: middle !important;
		margin-right: 0;
		margin-bottom: 0;
	}

	.receipt .dialog .el-form-item {
		margin: 10px 0 !important;
	}

	.receipt .el-pagination {
		margin-top: 30px;
		float: right;
	}
</style>
